<template>
	<view>
		<view class="page">
			<view class="top" :style="`padding-top:` + $store.state.StatusBar.statusBar + `px`">
				<view class="top-icon" @click="back">
					<u-icon name="arrow-left" size="42rpx" color='#fff'></u-icon>
				</view>
				<view class="top-title c-fff">{{ title }}</view>
			</view>
			<view class="body" :style="`margin-top:` + $store.state.StatusBar.statusBar + `px`">
				<view>
					<view class="diamond">
						<image class="img" mode="aspectFill" src="./img/ic_diamond.png"></image>
					</view>
					<view style="position: absolute; left:130rpx; top:80rpx;" class="c-fff">{{ info.diamonds }}</view>
					<view style="position: absolute; left:130rpx; color:#fff; top:120rpx; font-size:20rpx;">钻石余额(个)</view>
					<view style="position: absolute; right:40rpx; top:90rpx;" class="button"
						@click="to('/pages/m-pages/m-exchangeLog/index')">兑换记录</view>
				</view>
				<view class="list">
					<view class="item" v-for="(item, index) in info.list">
						<view class="img">
							<image class="img" mode="aspectFill" :src="item.image"></image>
						</view>
						<view style="font-size:30rpx; line-height:60rpx;" class="c-fff">{{ item.diamondsStr }}</view>
						<view style="font-size:20rpx; line-height:60rpx;" class="c-fff">{{ item.descript }}</view>
						<view class="bottom">
							<text>{{ item.goldCoinStr }}</text>
							<view class="button" @click="exchange(item)">兑换</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { to } from '@/utils/index.js';
export default {
	data() {
		return {
			title: '兑换商城',
			info: {}
		}
	},
	onLoad(option) {

	},
	onShow(option) {
		this.getInfo();
	},
	methods: {
		to,
		back() {
			to()
		},
		async getInfo() {
			let res = await this.$c.post("/app/exchange/getList")
			if (res.code != 0) {
				uni.navigateTo({
					url: '/im/login/login'
				});
			}
			this.info = res.data
		},
		async exchange(item) {
			let res = await this.$c.post("/app/exchange/exchange?id=" + item.id)
			if (res.code != 0) {
				uni.showToast({
					title: res.msg,
					icon: "none"
				})
				return;
			}
			uni.showToast({
				title: "兑换成功",
				icon: "none"
			})
			setTimeout(() => {
				this.getInfo()
			}, 1000)
		}
	}
}
</script>

<style scoped lang="scss">
.page {
	width: 100vw;
	padding: 30rpx;
	height: 100vh;
	/* background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff); */
}

.top {
	position: fixed;
	top: 0rpx;
	width: 100%;
	/* background-color: #e3ecfb; */
	z-index: 999;
	text-align: center;
	vertical-align: middle;
	padding: 10rpx;
}

.top-icon {
	position: absolute;
	left: 30rpx;
	z-index: 99;
	width: 30rpx;
	height: 30rpx;
}

.top-title {
	line-height: 50rpx;
	display: block;
	height: 50rpx;
	z-index: 99;
}

.body {
	padding-top: 80rpx;
	position: relative;

	.diamond {
		width: 80rpx;
		height: 80rpx;
	}

	.button {
		background-color: #aa8c72;
		color: #fff;
		display: inline-block;
		padding: 15rpx 30rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
	}

	.list {
		margin-top: 20rpx;

		.item {
			/* background-color: #e3ecfb; */
			background: rgba(255, 255, 255, 0.1);
			border-radius: 20rpx;
			width: 40%;
			height: 360rpx;
			float: left;
			margin-left: 2%;
			margin-top: 30rpx;
			position: relative;
			padding: 15rpx;

			.img {
				width: 180rpx;
				height: 180rpx;
				margin: 0 auto;
			}

			.bottom {
				position: absolute;
				bottom: 0rpx;
				width: 100%;

				text {
					float: left;
					color: #aa8c72;
					margin-right: 20rpx;
				}

				.button {
					float: right;
					padding: 5rpx 25rpx;
					margin-right: 30rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}
}</style>